// top
// userpannel
let userpannel=document.querySelector('.top span:nth-child(4)')
let userpannel_showORhide=0
userpannel.onclick=(evt)=>{
    evt.stopPropagation();
    userpannel_showORhide++;
    let userpannelShowList=document.querySelector('.top span:nth-child(4) ul');
    let allwrap=document.querySelector('.allwrap')
    // 点击显示，再点隐藏
    if(userpannel_showORhide%2==1){
        userpannelShowList.style.display='block';
        allwrap.style.display='block'
        allwrap.style.height=getComputedStyle(document.querySelector('body')).height;
        allwrap.style.width=getComputedStyle(document.querySelector('body')).width;

    }else{
        userpannelShowList.style.display='none';
        allwrap.style.display='none'

    }
    // 点击任何地方隐藏此面板
    document.onclick=()=>{
        userpannelShowList.style.display='none';
        allwrap.style.display='none'
        userpannel_showORhide=0;
    }
}
// nav沾顶,返回顶部
let navfixed=document.querySelector('.nav_search_like')
window.onscroll=()=>{
    if (scrollY>88) {
        navfixed.style.position='fixed'
    }else{
        navfixed.style.position='static'
    }
}
// nav显示菜单
let nav_showORhide=0;
let showlist=document.querySelector('.nav_search_like .showlist>div')
showlist.onclick=(evt)=>{
    evt.stopPropagation();
    nav_showORhide++;
    let showlistUL=document.querySelector('.showlist>nav')
    let showlistIMG=document.querySelector('.showlist>div>img')
    if (nav_showORhide%2==1) {
        showlistUL.style.display='block'
        showlistIMG.style.transform='rotate(180deg)'
        showlist.style.background='#303237'
    }else{
        showlistUL.style.display='none'
        showlistIMG.style.transform='rotate(0deg)'
        showlist.style.background='#25262C'
    }
    document.onclick=()=>{
        showlistUL.style.display='none'
        showlistIMG.style.transform='rotate(0deg)'
        showlist.style.background='#25262C'
        nav_showORhide=0;
    }
}
// nav 战网点数
let navnum_showORhide=0;
let battlenetcount=document.querySelector('.nav_search_like .battlenetcount')
battlenetcount.onclick=(evt)=>{
    evt.stopPropagation();
    navnum_showORhide++;
    let showlistUL=document.querySelector('.battlenetcount>ul')
    let showlistIMG=document.querySelector('.battlenetcount>img')
    if (navnum_showORhide%2==1) {
        showlistUL.style.display='block'
        showlistIMG.style.transform='rotate(180deg)'
        battlenetcount.style.background='#303237'
    }else{
        showlistUL.style.display='none'
        showlistIMG.style.transform='rotate(0deg)'
        battlenetcount.style.background='#25262C'
    }
    document.onclick=()=>{
        showlistUL.style.display='none'
        showlistIMG.style.transform='rotate(0deg)'
        battlenetcount.style.background='#25262C'
        navnum_showORhide=0;
    }
}
// nav 搜索
let searchipt=document.querySelector('.nav_search_like .search input')
let searchClearBtn=document.querySelector('.nav_search_like .search button')
searchipt.onkeydown=(evt)=>{
    // 有值显示清空按钮
    if(searchipt.value!=''){
        searchClearBtn.style.opacity='1'
    }else{
        searchClearBtn.style.opacity='0'
    }
    // 回车搜索
    if (evt.keyCode==13) {
        if (searchipt.value=='') {
            alert('请输入搜索内容')
        }else location.href=`../html/search.html?search=${searchipt.value}`
    }
}
searchClearBtn.onclick=()=>{
    searchipt.value='';
    searchClearBtn.style.opacity='0'
}
// 登录
let loginbtn=document.querySelector('.top ul li:first-child button')
loginbtn.onclick=(evt)=>{
    evt.stopPropagation();
    location.href=`../html/login.html`
}
// 注册
let resignbtn=document.querySelector('.top ul:last-child')
resignbtn.onclick=(evt)=>{
    evt.stopPropagation()
    location.href=`../html/resign.html`
}
// 自动登录
let username=localStorage.getItem('username')
let password=localStorage.getItem('password')
function checklogin(){
    let loginURL=`http://jx.xuzhixiang.top/ap/api/login.php`
            axios.get(loginURL,{params:{
                username,
                password,
            }}).then(function(resolve){
                if(resolve.data.code==1){
                    localStorage.setItem('token',resolve.data.data.token)
                    document.querySelector('.top span:last-child').innerHTML=`
                    <a href="javaScript:">${username}</a>
                    <div class="user_triangle"></div>
                    <ul>
                        <li><img src="images/top/login_user.jpg" alt=""><a href="#">账户</a></li>
                        <li class='loginout'><img src="images/top/login_resign.jpg" alt=""><a href="#">退出登录</a></li>
                    </ul>
                    </a>`
                    document.querySelector('.loginout').onclick=()=>{
                        localStorage.clear();
                        location.href='../index.html'
                    }
                }else{
                    localStorage.clear();
                }
            }).catch(function(reject){
                console.log(reject);
            });
}
checklogin();
// desc分类标签
let alltype=['礼包','大型多人角色扮演游戏','卡牌包','策略类卡牌游戏','团队动作游戏','即时策略游戏','多人在线战术策略游戏','可解锁内容','角色动作扮演游戏','游戏升级包','游戏服务','动作角色扮演游戏','游戏时间','仅限狂野模式','虚拟坐骑','指挥官']
// 检索pic
let picID=new URLSearchParams(location.search);
const picid=picID.get('pid');
function searchpic(){
    const searchURL='http://jx.xuzhixiang.top/ap/api/detail.php'
    axios.get(searchURL,{params:{
        id:picid
    }}).then(function(resolve){
        let {pname,pimg,pdesc}=resolve.data.data
        document.querySelector('.nav_shopifo p span:nth-child(2)').innerHTML=pname
        document.querySelector('.shoplist>img').src=pimg
        switch (pname) {
            case '暗黑破坏神III':
                document.querySelector('.introduce>img').src="../images/gameicon/diablo-iii.svg"
            break;
            case '守望先锋':
                document.querySelector('.introduce>img').src="../images/gameicon/overwatch.svg"
            break;
            case '风暴英雄':
                document.querySelector('.introduce>img').src="../images/gameicon/heroes-of-the-storm.svg"
            break;
            case '星际争霸II':
                document.querySelector('.introduce>img').src="../images/gameicon/starcraft-ii.svg"
            break;
            case '炉石传说':
                document.querySelector('.introduce>img').src="../images/gameicon/hearthstone.svg"
            break;
            case '魔兽世界':
                document.querySelector('.introduce>img').src="../images/gameicon/world-of-warcraft.svg"
            break;
            case '魔兽世界(经典怀旧服)':
                document.querySelector('.introduce>img').src="../images/gameicon/world-of-warcraft-classic.svg"
            break;
            default:
            break;
        }
        // 拆desc
        let desc=pdesc.split('/')
        console.log(desc);
        document.querySelector('.nav_shopifo p span:nth-child(3)').innerHTML=desc[0]
        document.querySelector('.introduce>span:nth-child(2)').innerHTML=desc[0]
        let HL=alltype.every((v,i)=>v!=desc[1])
        if(HL){
            // 存在高亮标签
            document.querySelector('.Heightlight').innerHTML=desc[1]
            document.querySelector('.introduce>span:nth-child(3)').innerHTML=desc[2]
        }else{
            // 不存在高亮标签
            document.querySelector('.Heightlight').style.display='none'
            document.querySelector('.introduce>span:nth-child(3)').innerHTML=desc[1]
        }
        let spanPrice=document.querySelector('.pricelist')
        switch (desc.length) {
            case 3:
                if (/奥术宝珠/.test(desc[2])) {
                    spanPrice.innerHTML=`<div><span class="nomoney"><img src="../images/shop/test_price.png" alt="">${desc[2]}</span></div></div></div>`
                }else{
                    spanPrice.innerHTML=`<span class="no_payoffPrice">${desc[2]}</span>`
                }
            break;
            case 4:
                spanPrice.innerHTML=`<span class="no_payoffPrice">${desc[3]}</span>`
            break;
            case 6:
                spanPrice.innerHTML=`<span class="payprice">${desc[3]}</span><span class="price">${desc[4]}</span><span class="payoff">${desc[4]}</span>`
            break;
            default:
            break;
        }
    }).catch(function(reject){
        console.log(reject);
    })
}
searchpic()
// 立即购买
let buynow=document.querySelector('.buy')
buynow.onclick=(evt)=>{
    evt.stopPropagation();
    location.href=`../html/shopcar.html?search=${picid}`
}
// 添加购物车
let addshopcar=document.querySelector('.addshopcar')
let userID=localStorage.getItem('uid')
addshopcar.onclick=(evt)=>{
    evt.stopPropagation();
    // 查询是否有重复商品
    const findrepeatURL=`http://jx.xuzhixiang.top/ap/api/cart-list.php`
    axios.get(findrepeatURL,{params:{
        id:  userID,
    }}).then(function(resolve){
        let FY=resolve.data.data.every((v,i)=>picid!=v.pid)
        if (FY) {
            // 添加商品
            const addshopURL=`http://jx.xuzhixiang.top/ap/api/add-product.php`
            axios.get(addshopURL,{params:{
                uid:  userID,
                pid:  picid,
                pnum:  1,
            }}).then(function(resolve){
                addshopcar.innerHTML='已添加该商品至购物车'
            }).catch(function(reject){
                console.log(reject);
            })
        }else{
            addshopcar.innerHTML='您已添加过该商品'
        }
    }).catch(function(reject){
        console.log(reject);
    })
}
let buyit=document.querySelector('.buy')
buyit.onclick=()=>{
    location.href='../html/pay.html'
}